import React, { PureComponent } from 'react'
import { Lists, ListItem, ListInfo, LoadMore } from "../style"
import { connect } from "react-redux"
import { action } from "../store"
import { Link } from 'react-router-dom';

class List extends PureComponent {

    render() {
        const { list, pages, loadMore } = this.props;
        return (
            <div>
                <Lists>
                    {
                        list.map((item, index) => (
                            <ListItem key={index} >
                                <img className="list_img" alt="sss" src={item.get("imgUrl")}></img>
                                <ListInfo>
                                    <Link to={'/detail/' + index}>
                                        <div className="list_title" href="/12#">{item.get('title')}</div>
                                    </Link>
                                    <p className="list_desc">{item.get("desc")}</p>
                                    <div className="list_info">{item.get("author")} | {item.get("likeCount")}like | {item.get("comment")}comment</div>
                                </ListInfo>
                            </ListItem>
                        ))
                    }
                </Lists>
                <LoadMore onClick={() => loadMore(pages)}>加载更多</LoadMore>
            </div>
        )
    }
}
const mapState = state => ({
    list: state.getIn(["home", "homeList"]),
    pages: state.getIn(["home", "pages"])
})

const mapMethods = (dispatch) => {
    return {
        loadMore(pages) {
            dispatch(action.loadMore(pages + 1))
        }
    }
}

export default connect(mapState, mapMethods)(List)
